<!DOCTYPE html>

<html>
<head>
<title>Layout Manager</title>
<style>
div {
margin: 0;
padding: 0;
}

#frame {
width: 400px;
height: 300px;
border: 3px solid black;
overflow: hidden;
}
</style>

<link type="text/css" href="resize/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="resize/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="resize/jquery-ui-1.7.1.custom.min.js"></script>

<script src="base2/base2.js"></script>
<script src="../layout.js"></script>
<script src="sizzle/sizzle.js"></script>

<script>

// main script
new function () {
	eval(base2.namespace);
	eval(base2.lang.namespace);
	eval(base2.Layout.namespace);

	// loader
	document.addEventListener('DOMContentLoaded', function () {
		// node references
		var frame = document.getElementById('frame');
	
		// initialize layout
		var layout = new LayoutManager(frame);
		forEach(Sizzle('.grid, .column', document), function (element) {
			layout.setFlexibleProperty(element, 'height');
			layout.setFlexibleProperty(element, 'width');
		});
		layout.setOrientation(Sizzle('.grid', document)[0], 'horizontal');
		layout.calculate();
		
		$('#frame').resizable().bind('resize', function () {
			layout.recalculate();
		});

		window.resizeFrame = function () {
			var frame = document.querySelector('#frame');
			frame.style.width = prompt('Width:', 400) + 'px';
			frame.style.height = prompt('Height:', 300) + 'px';
			confirm('Recalc?');
			layout.recalculate();
		}
	}, false);
};

</script>
</head>

<body>
<button onclick="resizeFrame()">Set Frame Size</button>
<div id="frame">
<div class="grid">
<div class="column" style="background: red">This is a column. This is a column. This is a column.</div>
<div class="column" style="background: blue">This is a column. This is a column. This is a column.</div>
<div class="column" style="background: green">This is a column. This is a column. This is a column.</div>
</div>
</div>
</body>
</html>